<template>
    <el-row>
        <el-col :span="24">
            <div class="login_wrap">
                <div class="login">
                    <p class="head">喵哆旺电商后台登录</p>
                    <el-form :model="loginInfo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="用户名:" prop="name">
                            <el-input v-model="loginInfo.name"></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码：" prop="password">
                            <el-input v-model="loginInfo.password" type="password"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="display:flex;justify-content:center;">
                        <el-button type="primary" @click="login" :disabled="no">登录</el-button>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import { setCookie } from '../tool/cookie'
export default {
    data(){
        return{
            loginInfo:{
                name:'',
                password:''
            },
            rules:{
                name:[
                    { required: true, message: '请输入登录名', trigger: 'blur' }
                ],
                password:[
                    {   required: true, message: '请输入密码', trigger: 'blur'}
                ]
            }
        }
    },
    computed:{
        no(){
            if(!this.loginInfo.name || !this.loginInfo.password){
                return true
            }else{
                return false
            }
        }
    },
    methods:{
        login(){
            this.$http.post(this.apiObj.login,this.loginInfo).then(data=>{
                if(data.status == 200 ){
                    sessionStorage.setItem('identity',data.content.identity)
                    setCookie('identity',data.content.identity)
                    this.$message.success(`${data.content.msg}`)
                    this.$router.push('/commodity')
                    // this.$store.commit('changeToken',data.content.identity)
                }else{
                    this.$message.error(`${data.content.msg}`)
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.login_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #eee;
    .head{
        text-align: center;
        margin-bottom: 20px;
    }
    .login{
        padding:50px;
        background-color: #fff;
        border-radius:10px;
    }
}
.el-row{
    height: 100%;
    .el-col{
        height: 100%;
    }
}
</style>

